.box {
    height: 650px;
    width: 800px;
    margin: 30px auto;
    /* background-color: skyblue; */
}

table {
    height: 85%;
    width: 85%;
    margin-left: 9%;
    text-align: center;
    /* border-collapse: collapse; */
    font-size: 25px;
    background-image: url(../images/bg.jpg);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    opacity: 0.7;
    /* z-index: 1; */
    /* display: block; */
    position: relative;
}

/* 透明度 */

table:hover {
    /* background-image: url(../images/bg.jpg); */
    opacity: 1;
}

/* 设置头部单元格大小  */

div table th {
    background-color: #426ab3;
    height: 40px;
}

/* 设置单元格大小 */

table th, td {
    width: 125px;
    height: 70px;
}

table td {
    border-radius: 12px;
}

/* 头部标题 */

table caption {
    color: blueviolet;
    font-size: 35px;
    /* margin-bottom: 20px; */
    background-color: #a3cf62;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* ----------------------------------------- */

/* 节日字体 */

span {
    font: normal 700 18px "\5B8B\4F53";
    color: #5f5d46;
    position: absolute;
    left: 28px;
    top: 40px;
}

td {
    position: relative;
}

/* 头部右边三角 */

.right {
    width: 0;
    height: 0;
    border: solid 7px transparent;
    border-right-color: black;
    position: absolute;
    left: 40%;
    top: 45px;
    z-index: 2;
}

/* 头部左边三角 */

.left {
    width: 0;
    height: 0;
    border: solid 7px transparent;
    border-left-color: black;
    position: absolute;
    right: 39%;
    top: 45px;
    z-index: 2;
}

.right:hover {
    border-right-color: #ed1941;
}

.left:hover {
    border-left-color: #ed1941;
}

/* ---------------------------------------- */

td:hover {
    background-color: #f58f98;
    color: blue;
    box-shadow: 1px 0 0 0px rgba(235, 247, 245, 0.897);
    cursor: pointer;
}

tr:nth-child(6) td:nth-of-type(n) {
    color: gray;
}

/* 选择tbody里的第5个tr，tr里面的第七个td */

tbody tr:nth-child(5) td:nth-of-type(7) {
    color: gray;
}

/* 重复修改代码 */

table tr:nth-child(1) td:nth-of-type(1) {
    color: grey;
}

table tr:nth-child(1) td:nth-of-type(2) {
    color: grey;
}

table tr:nth-child(1) td:nth-of-type(3) {
    color: grey;
}

table tr:nth-child(1) td:nth-of-type(4) {
    color: grey;
}

/* ----------------------------------- */

/* 上下圆角 */

table tr:first-child th:first-child {
    border-top-left-radius: 12px;
}

table tr:first-child th:last-child {
    border-top-right-radius: 12px;
}

table tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

/* 节气图片显示 */

caption {
    position: relative;
}

table tr div, table caption div {
    width: 175px;
    height: 250px;
    background-color: red;
    position: absolute;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    box-shadow: 0 12px 12px rgba(10, 16, 20, .24), 0 0 8px rgba(10, 16, 20, .12);
    /* z-index: -1; */
    display: none;
}

/* 头部 */

.head {
    background-image: url(../images/head.jpg);
    width: 320px;
    height: 310px;
    left: 750px;
    top: 100px;
    border-radius: 12px;
}

caption:hover div {
    display: block;
}

/* 清明节 */

.qm {
    background-image: url(../images/qingmingjie.jpg);
    left: -200px;
    top: 50px;
}

table tr:nth-child(2) td:nth-of-type(1):hover div {
    display: block;
    /* z-index: 1; */
}

/* 谷雨 */

.gy {
    background-image: url(../images/guyu.jpg);
    left: -390px;
    top: 50px;
}

table tr:nth-child(4) td:nth-of-type(3):hover div {
    display: block;
    /* z-index: 1; */
}

/* 愚人节 */

.yrj {
    background-image: url(../images/yurenjie.jpg);
    right: -400px;
    top: 20px;
}

table tr:nth-child(1) td:nth-of-type(5):hover div {
    display: block;
    /* z-index: 1; */
}

/* 地球日 */

.dqr {
    background-image: url(../images/diqiuri.jpg);
    right: -400px;
    top: -80px;
}

table tr:nth-child(4) td:nth-of-type(5):hover div {
    display: block;
    /* z-index: 1; */
}

/* 劳动节 */

.ldj {
    background-image: url(../images/laodongjie.jpg);
    right: -210%;
    top: 10px;
}

table tr:nth-child(5) td:nth-of-type(7):hover div {
    display: block;
    /* z-index: 1; */
}